<template>
	<view class="home">
		<!-- 1，头部信息 -->
		<message-head :isShowTool="isShowTool" @changeHeadTool="changeHeadTool"
			:loadingning="loadingning"></message-head>

		<!-- 2，功能列表 -->
		<message-fun @clickFunItem="clickFunItem" :sysNumData="sysNumData"></message-fun>

		<!-- 3，聊天核心页 -->
		<message-core :chatScrollHeight="chatScrollHeight" :topList="topList" :notTopList="notTopList"
			@longpressItem="longpressItem"></message-core>

		<!-- 4，弹出工具 -->
		<message-user-tool @hidePop="closeShowTool" :popButton="popButton" :showShade="showShade" :showPop="showPop"
			:popStyle="showHeightStyle" @pickerMenu="pickerMenu">
		</message-user-tool>

		<!-- <button @click="closelianjie">关闭</button> -->

	</view>
</template>

<script>
	//1，引入子组件
	import messageHead from './message-child/message-head.vue'
	import messageFun from './message-child/message-fun.vue'
	import messageCore from './message-child/message-core.vue'
	import messageUserTool from './message-child/message-user-tool.vue'

	//2，引入vuex
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'

	//3，引入网络请求
	import {
		getNotReadMsg,
		updateNotReadMsg
	} from '@/api/http/msg/msg_notloading.js'

	//4，引入websocket
	import websocket from '@/utils/msg/websocketUtils.js'

	//5，引入本地对象
	import {
		msgHomeData,
		msgChatData
	} from '@/object/msg.js'

	export default {
		components: {
			messageHead,
			messageFun,
			messageCore,
			messageUserTool
		},
		data() {
			return {
				isShowTool: false, //是否展示添加好友，添加群聊弹框

				topList: [], //置顶数据
				notTopList: [], //非置顶数据
				sysNumData: 0, //系统消息个数

				isVisitorLoginData: false, //用户是否登录

				scrollHeight: 0, //页面减去头部后可使用高度
				windowHeight: 0, //当前页面高度
				showHeightStyle: '', //展示样式
				showShade: false,
				showPop: false,
				popButton: ["标为关注", "置顶聊天", "删除该聊天"], //展示标题
				//选中用户
				checkData: {},

				//加载动画
				loadingning: false,
				pageNum: 20,
				chatScrollHeight: 0

			}
		},
		mixins: [badgeMix],
		watch: {
			sysNum() {
				this.sysNumData = this.sysNum
			},
			topMsgData() {
				this.getMsgList()
			},
			notTopMsgData() {
				this.getMsgList()
			}
		},
		computed: {
			...mapState('m_chat', ['topMsgData', 'notTopMsgData', 'notDisturbUserData', 'sysNum']),
			...mapState('m_user_info', ['userInfo', 'isVisitorLogin']),
		},
		methods: {
			...mapActions('m_chat', ['setMsgList', 'msgReag', 'msgGoTop', 'clearMsgByList', 'addChatData', 'addsysNum',
				'addNotReadMsg'
			]),

			//1，修改弹框展示
			changeHeadTool(item) {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				this.isShowTool = item
			},
			//2，获取聊天页面信息
			getMsgList() {
				this.topList = this.topMsgData
				this.notTopList = this.notTopMsgData

				this.sysNumData = this.sysNum
			},
			//3，长按展示弹框
			longpressItem(item) {
				//计算光标高度
				var height = parseInt(item.cellTop) - 45
				//比较高度大小
				var halfScrollHeight = parseInt(this.scrollHeight) / 2

				if (height > halfScrollHeight) {
					//展示在item上
					//this.isShowTool = '1'
					var showHeight = parseInt(this.windowHeight) - parseInt(item.cellTop) + 20
					this.showHeightStyle = `bottom:${showHeight}px;`
				} else {
					//展示在item下
					this.showHeightStyle = `top:${item.cellTop}px;`
				}

				//置顶消息
				if (item.isTop) {
					this.popButton = ["标记已读", "取消置顶", "删除该聊天"]
				} else {
					this.popButton = ["标记已读", "置顶聊天", "删除该聊天"]
				}

				this.checkData = item

				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			//3.1，获取当前页面高度
			getHomeHight() {
				const res = uni.getSystemInfoSync();
				//可使用高度
				this.windowHeight = res.windowHeight
				//用当前可使用高度减去 头部高度得出当前 消息列表可使用高度
				var height = res.windowHeight - 120
				this.scrollHeight = height

				var descHeight = (res.windowHeight - 50 - 80 - 10 - 35) + 'px'

				// #ifdef MP-WEIXIN
				this.chatScrollHeight = `calc(${descHeight} - 45px)`
				// #endif
				// #ifdef APP-PLUS
				this.chatScrollHeight = `calc(${descHeight} - 45px)`
				// #endif
				// #ifdef H5
				this.chatScrollHeight = `calc(${descHeight} -  45px - 92upx)`
				// #endif

			},
			//3.2，关闭弹框
			closeShowTool() {
				this.showPop = false;
				//this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 10);
			},
			//3.3，选择某一个选项
			pickerMenu(index) {
				//console.log(this.checkData)
				if (index == 0) {
					return this.msgIsRead()
				} else if (index == 1) {
					return this.msgIsGoTop()
				} else {
					return this.msgIsClear()
				}
			},
			//3.4，消息已读
			msgIsRead() {
				if (this.checkData.msgNum == 0) {
					return uni.$showMsg('暂无新的消息！');
				}
				this.msgReag(this.checkData)
			},
			//3.5，消息置顶或非置顶
			msgIsGoTop() {
				//console.log(this.checkData)
				this.msgGoTop(this.checkData)
			},
			//3.6，消息删除
			msgIsClear() {
				this.clearMsgByList(this.checkData)
			},

			//4，点击头部功能按钮
			clickFunItem(item) {
				if (item == 'searchFriend') {
					this.funSearchFriend()
				} else if (item == 'addressBook') {
					this.funAddressBook()
				} else if (item == 'systemMsg') {
					this.funSystemMsg()
				}
			},
			//4.1，跳转好友搜索页面
			funSearchFriend() {
				uni.navigateTo({
					url: '/pages/msg/search-relation/search-relation'
				})
			},
			//4.2，跳转通讯录
			funAddressBook() {
				uni.navigateTo({
					url: '/pages/msg/contact/contact'
				})
			},
			//4.3，跳转系统通知页面
			funSystemMsg() {
				uni.navigateTo({
					url: '/pages/msg/msg-notice/msg-notice'
				})
			},

			//5，初次连接Socket
			connectSocketInit() {
				if (uni.myWebsocket == undefined || uni.myWebsocket == '' || uni.myWebsocket == null) {
					//连接上websocket
					uni.$connectSocketInit.connectSocket(uni.$nettyPort)
				}
			},


			//6，查看历史消息
			getNotRead() {
				var that = this
				that.loadingning = true
				/* var pageNum = uni.getStorageSync('queryStorageMsg')
				//console.log(pageNum)
				if (pageNum == undefined || pageNum == null || pageNum == '') {
					pageNum = this.pageNum
				} */
				//console.log(pageNum)
				getNotReadMsg(this.userId, 600).then(res => {
					if (res.data.pubInfo.code !== 0) {
						that.loadingning = false
						return uni.$showMsg(res.data.pubInfo.message);
					}
					var busInfo = res.data.busInfo
					that.addNotReadMsg(busInfo)
					that.loadingning = false
					//uni.setStorageSync('queryStorageMsg', 20)
					// if (busInfo.length >= this.pageNum) {
					// 	//如果，还有剩余消息，继续拉取。
					// 	setTimeout(() => {
					// 		that.getNotRead()
					// 	}, 50)

					// }

					/* updateNotReadMsg().then(result => {
						if (result.data.pubInfo.code !== 0) {
							that.loadingning = false
							return uni.$showMsg(result.data.pubInfo.message);
						}
						//console.log('修改了历史状态')
						//console.log(busInfo)
						//添加消息至本地
						
					}) */
				})

			},




		},

		onLoad() {
			this.isVisitorLoginData = this.isVisitorLogin
			if (this.isVisitorLoginData) {
				//1，获取页面高度
				this.getHomeHight()
				//2，获取系统消息总数
				this.sysNumData = this.sysNum

				//3，获取历史消息
				this.getNotRead()
			} else {}
		},
		onShow() {
			this.isVisitorLoginData = this.isVisitorLogin
			if (this.isVisitorLoginData) {
				console.log('用户模式！')
				//获取历史消息
				this.getNotRead()

				//获取消息列表
				this.getMsgList()

				//连接websocket
				this.connectSocketInit()
			} else {
				console.log('游客模式！')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F6F7;
		//overflow: hidden;
	}
</style>